<template>
  <div id="topData">
    <h1>
      <strong>昨日数据</strong>
      <popover :descriptionData="baseYesterday"></popover>
      <span> 数据更新至 {{ topData.yesterday }}</span>
    </h1>
    <el-row :gutter="20" v-loading="loading">
      <el-col :span="8">
        <dl>
          <dt>昨日活跃用户数</dt>
          <dd class="num">
            {{ filterNum(topData.activeUserCount) }}
          </dd>
          <dd>
            日
            <span>
              {{ filterNumPercentage(topData.activeUserRatioByDay) }}
              <topDataIcon :num="topData.activeUserRatioByDay"></topDataIcon
            ></span>
          </dd>
          <dd>
            周
            <span>
              {{ filterNumPercentage(topData.activeUserRatioByWeek) }}
              <topDataIcon :num="topData.activeUserRatioByWeek"></topDataIcon
            ></span>
          </dd>
          <dd>
            月
            <span
              >{{ filterNumPercentage(topData.activeUserRatioByMonth) }}
              <topDataIcon :num="topData.activeUserRatioByMonth"></topDataIcon
            ></span>
          </dd>
        </dl>
      </el-col>
      <el-col :span="8">
        <dl>
          <dt>昨日新增用户数</dt>
          <dd class="num">
            {{ filterNum(topData.newUserCount) }}
          </dd>
          <dd>
            日
            <span
              >{{ filterNumPercentage(topData.newUserRatioByDay) }}
              <topDataIcon :num="topData.newUserRatioByDay"></topDataIcon
            ></span>
          </dd>
          <dd>
            周
            <span
              >{{ filterNumPercentage(topData.newUserRatioByWeek) }}
              <topDataIcon :num="topData.newUserRatioByWeek"></topDataIcon
            ></span>
          </dd>
          <dd>
            月
            <span
              >{{ filterNumPercentage(topData.newUserRatioByMonth) }}
              <topDataIcon :num="topData.newUserRatioByMonth"></topDataIcon
            ></span>
          </dd>
        </dl>
      </el-col>
      <el-col :span="8">
        <dl>
          <dt>昨日新增留存率</dt>
          <dd class="num">
            {{ filterNumPercentage(topData.keepUserRatio) }}
          </dd>
          <dd>
            日
            <span
              >{{ filterNumPercentage(topData.keepUserRatioByDay) }}
              <topDataIcon :num="topData.keepUserRatioByDay"></topDataIcon
            ></span>
          </dd>
          <dd>
            周
            <span
              >{{ filterNumPercentage(topData.keepUserRatioByWeek) }}
              <topDataIcon :num="topData.keepUserRatioByWeek"></topDataIcon
            ></span>
          </dd>
          <dd>
            月
            <span
              >{{ filterNumPercentage(topData.keepUserRatioByMonth) }}
              <topDataIcon :num="topData.keepUserRatioByMonth"></topDataIcon
            ></span>
          </dd>
        </dl>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getTopData } from '@/api/dataStatistics/baseData/index.js' // 接口
import topDataIcon from '@component/dataStatistics/baseData/com/topDataIcon' // 上部搜索条件
import popover from '@component/dataStatistics/common/popover' // 注释说明
export default {
  name: 'topData',
  msg: '',
  components: {
    topDataIcon,
    popover
  },
  data() {
    return {
      loading: false,
      topData: {}
    }
  },
  computed: {
    baseYesterday() {
      return this.$store.state.descriptionData.baseYesterday
    }
  },
  mounted() {
    this.getTopDataFun()
  },
  methods: {
    getTopDataFun() {
      this.loading = true
      getTopData(
        (response) => {
          this.topData = response
          this.loading = false
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    filterNum(num) {
      return num !== null && num !== undefined ? num : '--'
    },
    filterNumPercentage(num) {
      return num !== null && num !== undefined ? num + '%' : '--'
    }
  }
}
</script>

<style lang="less">
#topData {
  margin: 0 30px 10px;
  border: 1px solid #ccc;
  padding: 15px 20px;
  border-radius: 20px;
  font-size: 14px;
  h1 {
    color: #000;
    margin-bottom: 20px;
    font-size: 20px;
    span {
      font-size: 14px;
      margin-left: 10px;
    }
  }
  dl {
    text-align: center;
    i {
      font-size: 16px;
    }
    dt {
      font-size: 16px;
      line-height: 20px;
      color: #666;
    }
    dd {
      line-height: 24px;
      color: #555;
      padding-left: 8px;
      &.num {
        height: 49px;
        font-size: 24px;
        font-weight: bold;
        color: #000;
        line-height: 44px;
        padding-bottom: 5px;
      }
      span {
        display: inline-block;
        text-align: right;
        width: 90px;
      }
      .icon {
        width: 16px;
        display: inline-block;
      }
    }
  }
  .el-icon-top {
    color: #67c23a;
  }
  .el-icon-bottom {
    color: #f56c6c;
  }
}
</style>
